<template>
  <div class="setting">
    <div class="adminLogin">
      <div class="logInTop"></div>
      <div class="userInput">
        <div>用户名 :</div>
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </div>
      <div class="userInput">
        <div>密码 :</div>
        <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
      </div>
      <div>
        <el-button :loading="logins" @click="login">登录</el-button>
      </div>


    </div>
  </div>

</template>

<script>
import { mapMutations } from 'vuex';
export default {
name: "login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      logins: false,
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    login() {
      this.logins = true;
      let _this = this;
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空');
      } else {
        this.$http.post("admin/login",{
          username: this.loginForm.username,
          password: this.loginForm.password,
        }).then(res => {
          console.log(res.data);
          _this.userToken = 'Bearer ' + res.data.data.body.token;
          // 将用户token保存到vuex中
          _this.changeLogin({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('登陆成功');
        }).catch(error => {
          alert('账号或密码错误');
          console.log(error);
        });
      }

    }
  },
}
</script>

<style lang="less">
.setting {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fffafa;
}
.adminLogin {
  position: absolute;
  height: 300px;
  width: 500px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  border-radius: 20px;
  background: #fffafa;
  box-shadow:   30px 30px 59px #d9d5d5,
                -30px -30px 59px #ffffff;


  .logInTop {
    margin-top:45px
  }


  .userInput {
    margin:15px 0;


    .el-input {
      padding:0 0;
      width: 75%;
      margin:0 0;
    }
    div {
      color: rgba(118, 118, 118, 0.87);
      display:inline-block;
      padding: 0 0 0 6%;
      width: 15%;
    }
  }
  .el-button {
    padding: 15px 150px ;
    margin: 30px  85px;

  }
}


</style>
